

<template>
  <div class="m-table">
    <!--
      /**
      * @Description:element-plus `table`属性参考文档
      * see:https://element-plus.org/#/zh-CN/component/table
      * @Date: 2021-09-16 11:12:47
      */
    -->
    <el-table 
		:data="tableObj.tableData" 
		:height="tableObj.props ? tableObj.props.height||'auto' : 'auto'" 
		:size="tableObj.props ? tableObj.props.size||'medium' : 'medium'" 
		:border="tableObj.props ? tableObj.props.border||false : false" 
		:highlight-current-row="tableObj.props ? tableObj.props.highlightCurrentRow||false : false" 
		:row-style="tableObj.props ? tableObj.props.rowStyle||{} : {}" 
		:cell-style="tableObj.props ? tableObj.props.cellStyle||{} : {}" 
		:header-row-style="tableObj.props ? tableObj.props.headerRowStyle||{} : {}" 
		:header-cell-style="tableObj.props ? tableObj.props.headerCellStyle||{} : {}"
		:header-row-class-name="tableObj.props ? tableObj.props.headerRowClassName||'' : ''"
		:header-cell-class-name="tableObj.props ? tableObj.props.headerCellClassName||'' : ''"
		:cell-class-name="tableObj.props ? tableObj.props.cellClassName||'' : ''"
		:row-class-name="tableObj.props ? tableObj.props.rowClassName||'' : ''">
      <el-table-column 
			v-for="item in tableObj.tableHeader" 
			:key="item.prop" 
			:row-key="item.prop" 
			:prop="item.prop" 
			:label="item.label" 
			:style="item.styles ? item.styles : {}" 
			:width="item.styles ? item.styles.width || 'auto' : 'auto' " 
			:align="item.styles ? item.styles.textAlign || 'left' : 'left' " 
			:show-overflow-tooltip="item.props ? item.props.showOverflowTooltip || false : false" 
			:class-name="item.props ? item.props.className || '' : ''" 
			:label-class-name="item.props ? item.props.labelClassName || '' : ''"></el-table-column>
    </el-table>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
export default defineComponent({
  props: {
    tableObj: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    ElTable,
    ElTableColumn,
  },
  setup(props) {
    let tableObj = props.tableObj;
    return {
      tableObj,
    };
  },
});
</script>
<style lang="sass" scoped>
.m-table
  padding: 10px 0
</style>